<template>
  <view class="my-waterfalls" :style="{ gap: gap }">
    <view
      class="my-waterfalls__list"
      :style="{ gap: gap }"
      v-for="(list, index) in waterfalls"
      :key="index"
    >
      <view
        class="my-waterfalls__item"
        v-for="(item, idx) in list"
        :key="item.id"
        @click="toGoodsDetail(item)"
      >
        <up-image
          :src="item.image_url"
          mode="widthFix"
          width="100%"
          lazy-load
          show-loading
          radius="10rpx"
        ></up-image>
        <view class="demo-warter">
          <view class="demo-title">
            {{ item.name }}
          </view>
          <view class="sub_title">
            {{ item.min_sale_quantity }} {{ item.uom.name }}起订
          </view>
          <view class="product-bottom">
            <view class="demo-price">
              <view
                v-if="item.sale_price"
                style="color: #ccc; text-decoration: line-through; size: 24rpx"
              >
                ￥{{
                  item.default_variant
                    ? item.default_variant.guiding_price
                    : item.guiding_price
                }}
              </view>
              <view>
                ￥{{
                  item.sale_price
                    ? item.default_variant
                      ? item.default_variant.sale_price
                      : item.sale_price
                    : "***"
                }}
              </view>
            </view>
            <view class="tips" v-if="item.sale_price == null">
              入驻查看价格
              <u-icon name="arrow-right" size="15" color="#999999"></u-icon>
            </view>
            <view v-else>
              <u-icon name="/static/images/icon/cart.png" size="58rpx"></u-icon>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, watch } from "vue";
import { useStore } from "vuex";

const store = useStore();

const emits = defineEmits(["itemClick"]);

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  column: {
    type: Number,
    default: 2,
  },
  gap: {
    type: String,
    default: "10rpx",
  },
  customItemClick: {
    type: Boolean,
    default: false,
  },
});

const waterfalls = ref([]);

watch(
  () => props.list,
  (val) => {
    if (val.length > 0) {
      waterfalls.value = convertToTwoDimensionalArray(val, props.column);
    } else {
      waterfalls.value = [];
    }
  }
);

// 将一维数组转换为二维数组
function convertToTwoDimensionalArray(list, column) {
  const result = Array.from({ length: column }, () => []);
  list.forEach((item, index) => {
    const colIndex = index % column;
    result[colIndex].push(item);
  });
  return result;
}

function toGoodsDetail(item) {
  if (props.customItemClick) {
    emits("itemClick", item);
  } else {
    if (store.state.user.isLogin) {
      if (store.state.user.isStore) {
        uni.navigateTo({
          url: "/pages/goods/detail?id=" + item.id,
        });
      } else {
        uni.navigateTo({
          url: "/pages/app/store",
        });
      }
    } else {
      uni.navigateTo({
        url: "/pages/user/login",
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.my-waterfalls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .my-waterfalls__list {
    flex: 1;
    display: flex;
    flex-direction: column;

    .my-waterfalls__item {
      background-color: #ffffff;
      border-radius: 10rpx;

      .demo-warter {
        border-radius: 8px;
        padding: 8px;
        position: relative;
      }

      .demo-image {
        width: 100%;
        height: 300rpx;
        border-radius: 4px;
      }

      .demo-title {
        font-size: 30rpx;
        margin-top: 5px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
      }

      .sub_title {
        color: #999999;
        font-size: 24rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .product-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .demo-price {
          font-size: 30rpx;
          color: #ff0000;
          margin-top: 5px;
        }

        .tips {
          font-size: 24rpx;
          color: #999999;
          display: flex;
          align-items: center;
        }
      }

      .demo-shop {
        font-size: 22rpx;
        margin-top: 5px;
      }
    }
  }
}
</style>
